<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书管理系统</title>
<!--引入css文件夹里面的bootstrap.css-->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
<!--引入js文件夹里面的jquery-->
<script src="../static/bootstrap/js/jquery.min.js"></script>
<!--引入js文件夹里面的bootstrap.js-->
<script src="../static/bootstrap/js/bootstrap.js"></script>
</head>
<body>
	<%
		// 获取项目上下文
		String baseUrl = request.getContextPath();
	%>

<div class="container">
		<h1>添加书籍</h1>	
		<div>
            <div class="row form-group">
                <div class="col-2 text-right">
                    <label class="col-form-label">编号</label>
                </div>
                <div class="col-10">
                    <input type="text" class="form-control" name="code" id="code">
                </div>
            </div>
            
            <div class="row form-group">
                <div class="col-2 text-right">
                    <label class="col-form-label">名称</label>
                </div>
                <div class="col-10">
                    <input type="text" class="form-control" name="name" id="name">
                </div>
            </div>
            
             <div class="row form-group">
                <div class="col-2 text-right">
                    <label class="col-form-label">单价</label>
                </div>
                <div class="col-10">
                    <div class="input-group">
			            <input type="text" class="form-control" name="price" id="price">
			            <div class="input-group-append">
			                <span class="input-group-text">
			                    元
			                </span>
			            </div>
			        </div>
                </div>
            </div>
             <div class="row form-group">
                <div class="col-2 text-right">
                    <label class="col-form-label">作者</label>
                </div>
                <div class="col-10">
                    <input type="text" class="form-control" name="author" id="author">
                </div>
            </div>
             <div class="row form-group">
                <div class="col-2 text-right">
                    <label class="col-form-label">库存</label>
                </div>
                <div class="col-10">
                    <div class="input-group">
			            <input type="number" class="form-control" name="stock" id="stock">
			            <div class="input-group-append">
			                <span class="input-group-text">
			                    本
			                </span>
			            </div>
			        </div>
                </div>
            </div>
             <div class="row form-group">
                <div class="col-2 text-right">
                    <label class="col-form-label">出版社</label>
                </div>
                <div class="col-10">
                    <input type="text" class="form-control" name="publisher" id="publisher">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-2 text-right">
                    <label class="col-form-label">描述</label>
                </div>
                <div class="col-10">
                    <textarea rows="3" class="form-control" name="description" id="description"></textarea>
                </div>
            </div>
            
            <div class="row form-group">
                <div class="col-2">

                </div>
                <div class="col-10  ">
                    <button class="btn btn-primary" id="add">保存</button>
                </div>
            </div>
        </div>
        
        <!-- 消息提示框 -->
		<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
		    <div id="addBookToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
		      <div class="toast-body text-center">
		        	
		      </div>
		    </div>
		</div>
        
    </div>
    
    <script type="text/javascript">
    	var baseUrl = '<%=baseUrl%>';
    	$('#add').click(function(){
    		var code = $('#code').val();
    		var name = $('#name').val();
    		var price = $('#price').val();
    		var author = $('#author').val();
    		var stock = $('#stock').val();
    		var publisher = $('#publisher').val();
    		var description = $('#description').val();
    		var book = {
    				code : code,
					name : name,
					price:price,
					author:author,
					stock:stock,
					publisher:publisher,
					description:description
    		};
    		// ajax发送请求
			$.ajax({
				type : "POST",
				url : baseUrl + "/AddBookServlet.do",
				data : book,
				success : function(data) {
					console.log(data);
					var code = data.code;
					if(code == 1){
						$('#addBookToast>.toast-body').text(data.message);
						$('#addBookToast').toast('show');
						// 跳转至书籍页面
						setTimeout(function() {
							window.location.href=baseUrl+"/BookListServlet.do";
						}, 2000);
					}else{
						$('#addBookToast>.toast-body').text(data.message);
						$('#addBookToast').toast('show');
					}
				},
				error : function(data) {
					$('#addBookToast>.toast-body').text("系统错误");
					$('#addBookToast').toast('show');
				}
			});
    	});
    
    </script>
  
</body>
</html>